<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人主页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper-4.3.5.min.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
    <div id="home">
        <div class="banner relative hidden" id="banner-normal" :style="{'width':winWidth+'px'}"> 
            <div class="swiper-container-banner relative" @click.stop="bigPicture(true)">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item,index) in userinfo.user_image" :style="{'background-image':'url('+item+')','background-size':'cover','height':winWidth+'px'}"></div>
                </div>
                <!-- 解决白色背景图片无法看到白色字体问题-->
                <div class="banner_bg absolute" :style="{'width':winWidth+'px','height':winWidth+'px'}"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-banner"></div>
            </div>
            <div class="banner-controller absolute" :style="{'width':winWidth+'px'}">
              <div style="margin-bottom: 6px;display: flex; align-items: center;">
                <div class="name moreDot" v-text="userinfo.nickname"></div>
                <div class="follow_btn relative center " @click.stop="followUser" v-if="curreny.uid != userid">
                    <p class="absolute follow_val" v-if="userinfo.is_follow == 0">
                        <img  src="../../image/follow_icon.png" class="follow_icon" />关注
                    </p>
                    <p class="absolute follow_val" v-else>取消关注</p>
                </div>
              </div>
              <div style="margin-bottom:8px;">
                <div v-if="userinfo.beautiful_cover" class="beautiful_uid center" :style="{'background-image':'url('+userinfo.beautiful_cover+')','background-size':'100% 100%'}">
                  <span>ID:</span><span v-text="userinfo.beautiful_uid"></span>
                </div>
                <div  v-else class="beautiful_uid center" :style="{'background':'rgba(0,0,0,.2)','border-radius': '10px'}">
                  <span>ID:</span><span v-text="userinfo.beautiful_uid"></span>
                </div>
                <img src="../../image/city_icon.png" class="city-icon" v-if="userinfo.city!=0"><span v-if="userinfo.city!=0" v-text="userinfo.city"></span>
              </div>
              <div  class="sex_vip">
                <div class="sex-btn center flex" :class="userinfo.sex==2?'sex-btn-female':'sex-btn-male'">
                    <div>
                      <img v-if="userinfo.sex==2" src="../../image/sex-female.png" class="sex-icon" />
                      <img v-else src="../../image/sex-male.png" class="sex-icon" />
                    </div>
                    <div><span v-text="userinfo.age" style="font-size: 10px;"></span></div>
                </div>
                <div style="align-items: center;display: flex;">
                  <img v-if="userinfo.level_id>0" :src="'../../image/vip_icon'+userinfo.level_id+'.png'" class="vip_icon" />
                </div>
                <div class="constellation relative center" v-for="(tag,idx) in userinfo.custom_tag" :class="'constellation'+(idx+1)">
                     <p  class="absolute constellation_val"  v-text="tag"></p>
                </div>
              </div>
              <div class="banner_bottom">
                <div  style="margin-top: 5px;">
                  <span v-if="skillList.length>0" class="homepage-number" v-text="userHomeCount.orderNum"></span>
                  <span v-if="skillList.length>0" class="homepage-text">接单</span>
                  <span class="homepage-number">{{userHomeCount.inMoney | number}}</span>
                  <span class="homepage-text">收入</span>
                  <span class="homepage-number">{{userHomeCount.outMoney | number}}</span>
                  <span class="homepage-text">消费</span>
                </div>
                <div v-if="userinfo.voice" class="video_btn" @click="playAudio(userinfo.voice)">
                    <div>
                        <img v-if="(viderm != userinfo.voice) || !radioStatus" src="../../image/voice_icon.png">
                        <img v-if="(viderm == userinfo.voice) && radioStatus" src="../../image/voice_ing_icon.gif">
                    </div>
                    <div class="duration">{{duration}}</div>
                </div>
              </div>
            </div>
        </div>
        <div class="banner absolute bannerBig" id="isBig" @click="bigPicture(false)">
            <div class="swiper-container-big relative" id="swiper" :style="{'width':winWidth+'px','height':winHeight+'px'}">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item,index) in userinfo.user_image" :style="{'background':'url('+item+') no-repeat','background-size':'100%','background-position': 'center','width':winWidth+'px'}"></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-big"></div>
            </div>
            <div class="popup z-fixed" @click="bigPicture(false)" >
                <div class="bg" id="bg_big_picture" style="background:#fff;"></div>
            </div>
        </div>
        <div>

            <!-- 技能  -->
            <div class="bar-area"  v-if="skillList.length>0 && !isCheck">
                <div class="top">
                    <span class="red-bar"></span><span class="bar-title">技能</span>
                </div>
              <div class="main">
                <div class="skills-list">
                  <div class="item relative" v-for="(item,index) in skillList">
                    <img src="../../image/skill_disable.png" alt="休息中" class="skill_disable absolute" v-if="item.stop_order==1"> 
                    <div style="width: 17%;"><img :src="item.head" class="skill-icon" :alt="item.title" /></div>
                    <div style="width: 53%" class="text-left">
                      <div class="skill-first flex" style="justify-content: flex-start;">
                        <div class="skill-name" v-text="item.title"></div>
                        <div class="skill-number center flex">
                          <div v-text="item.order_count+'单'"></div>
                        </div>
                      </div>
                      <p class="skill-label" style="line-height: 25px;">
                        <span v-for="(tag,idx) in item.tags" v-text="tag" class="moreDot"></span>
                      </p>
                    </div>
                    <div class="skill-evaluate" style="width: 30%;">
                      <div class="star text-right">
                        <img v-if="item.star>=1" src="../../image/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=2" src="../../image/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=3" src="../../image/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=4" src="../../image/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=5" src="../../image/skill-star.png" class="skill-star" />
                        <img v-if="item.half_star>=5" src="../../image/skill-half-star.png" class="skill-star">
                        <span v-text="item.star"></span></div>
                      <div class="price">￥{{item.price}}/{{item.units}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 房间中 -->
            <div class="bar-area" v-if="userHomeCount.chatroom_id!=0">
              <div class="top text-left">
                  <span class="red-bar"></span><span class="bar-title">房间中</span>
              </div>
              <div class="main relative">
                <div class="skills-list">
                  <div class="item">
                    <div style="display: flex;">
                      <img :src="userHomeCount.cover" class="skill-icon" @error="defaultRoomCover"/>
                      <div>
                        <p class="skill-first"><span class="skill-name" v-text="userHomeCount.title"></span></p>
                        <p class="sing-person-number">
                          {{userHomeCount.init_count}}人在线
                        </p>
                      </div>
                    </div>
                    <div class="sing-button box-shadow common_btn" @click="enterRoomFun" >跟过去</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 资料 -->
            <div class="bar-area">
                <div class="top text-left">
                    <span class="red-bar"></span><span class="bar-title">资料</span>
                </div>
                <div class="homepage-info">
                    <div><span>昵称：</span><span v-text="userinfo.nickname"></span></div>
                    <div><span>性别：</span><span v-text="userinfo.sex==2?'女':'男'"></span></div>
                    <div><span>年龄：</span><span v-text="userinfo.age"></span></div>
                    <div><span>ID：</span><span v-text="userinfo.beautiful_uid"></span></div>
                    <div><span>星座：</span><span v-text="userinfo.constellation"></span></div>
                    <div><span>个人签名：</span><span v-text="userinfo.sign"></span></div>
                </div>
            </div>

            <!-- 礼物墙 -->
            <div class="bar-area">
              <div class="top text-left" style="margin-bottom: 20px;">
                  <span class="red-bar"></span><span class="bar-title">礼物墙</span>
              </div>
              <div class="gift-wall ">
                    <div class="relative" @click="searchGift(1)">
                      <div :class="{'wall-active':current == 1,'wall-normal':current ==2}"  class="absolute">
                        <p class="top-title">
                          <span v-text="giftObj.inLevel" class="gift-index"></span>
                          <span class="gift-name" v-text="giftObj.inName"></span>
                        </p>
                        <p class="bottom"><span>收到礼物</span><span class="gift-number" v-text="giftObj.inMoney"></span></p>
                      </div>
                    </div>
                    <div class="relative" @click="searchGift(2)">
                      <div :class="{'wall-active':current == 2,'wall-normal':current ==1}" class="absolute">
                        <p class="top-title">
                          <span v-text="giftObj.outLevel" class="gift-index"></span>
                          <span class="gift-name" v-text="giftObj.outName"></span>
                        </p>
                        <p class="bottom"><span>送出礼物</span><span class="gift-number" v-text="giftObj.outMoney"></span></p>
                      </div>
                    </div>
              </div>
              <div class="gift-list" v-show="giftList.length>0">
                <div class="swiper-container">
                    <div class="swiper-wrapper" style="height:230px;">
                      <div class="swiper-slide gift-item" v-for="(item,idx) in giftList" :key="idx"  style="height: 200px;">
                            <div class="relative g-item" v-for="(gift,index) in item">
                                <div class="gift-wall-number-bg absolute">
                                    <div class="gift-wall-number center flex">
                                        <div><span v-text="'×'+gift.medal"></span></div>
                                    </div>
                                </div>
                                <div class="gift-img"><img :src="gift.logo" /></div>
                                <div class="gift-name" v-text="gift.title"></div>
                            </div>
                      </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
              </div>
              <div v-show="giftList.length==0" @click="getGiftList()">
                <div class="flex" >
                  <img src="../../image/no-data.png" alt="点击屏幕，重新加载~" class="no-data"/>
                </div>
                <div class="default-text center" style="margin-top:0;margin-bottom:25px;">您还没有{{current==1?'收到':'送出'}}礼物哦</div>
              </div>
            </div>

            <!-- 底部操作按钮 -->
            <div class="footer flex-between" v-if="t && curreny.uid != userid">
              <div class="send_message_btn center common_btn" :style="{'width':((skillList.skillNumber>0 && !isCheck)?'33%':'100%')}" @click="sendMessageFun">发消息</div>
              <div class="box-shadow place_order_btn center common_btn" v-if="skillList.skillNumber>0 && !isCheck" @click="placeOrder(1)">立即下单</div>
            </div>

            <div class="popup z-fixed" v-show="orderStep!=0">
                <div class="bg" v-if="orderStep!=0" @click="placeOrder(0)"></div>
                <div class="bomb-box" id="skillframe">
                    <div class="relative center" v-if="orderStep == 1">
                        <div class="title">选择宝宝的技能</div>
                        <div><img src="../../image/close_icon.png" class="close_icon" @click="placeOrder(0)" /></div>
                        <div class="select_skill_list">
                          <div @click="selectSkill(skill)" :class="{'selected':orderObj.adder_id==skill.adder_id}" v-for="(skill,idx) in skillList" v-text="skill.game_title+skill.title" v-if="skill.stop_order==0"></div>
                        </div>
                        <div class="box-shadow submit_btn"  @click="placeOrder(2)">下一步</div>
                    </div>
                    <div class="relative" v-show="orderStep == 2">
                        <div style="height: 16px;margin-top: 15px;">
                          <img src="../../image/back_icon.png" class="back_icon absolute" @click="placeOrder(1)" />
                          <img src="../../image/close_icon.png" class="close_icon absolute" @click="placeOrder(0)" />
                        </div>
                        <div class="title_left text_left">填写信息</div>
                        <div class="place_order_form">
                          <div>
                            <div>选择服务类型</div>
                            <div class="form_value"><span v-text="orderObj.title"></span></div>
                          </div>
                          <div v-show="paragraphObj.game_regional_locate.length>0" @click="showSelectBox(1)"  id="trigger1">
                            <div v-text="paragraphObj.game_regional_locate[0]"></div>
                            <div class="form_value"><span v-text="orderObj.regional_title"></span><span class="arrow_icon"></span></div>
                          </div>
                          <div v-show="paragraphObj.game_regional_locate.length>1" @click="showSelectBox(2)" id="trigger2">
                            <div v-text="paragraphObj.game_regional_locate[1]"></div>
                            <div class="form_value"><span v-text="orderObj.grade_title"></span><span class="arrow_icon"></span></div>
                          </div>
                          <div>
                            <div>选择价格</div>
                            <div class="form_value">
                              <!-- <span>我的段位：白银以下</span><span class="arrow_icon"></span> -->
                              <p class="form_price text-right" v-text="'￥'+orderObj.price+'/'+orderObj.units"></p>
                            </div>
                          </div>
                          <div style="border-bottom: 0;"  @click="showSelectBox(3)" id="trigger3">
                            <div>选择时长</div>
                            <div class="form_value">
                                <span v-text="(orderObj.times || 0)+orderObj.units"></span>
                                <span style="color: #6c60f6;font-size: 13px;" v-text="'(合计'+((orderObj.times*orderObj.price) || 0)+'元)'"></span>
                                <span class="arrow_icon"></span>
                            </div>
                          </div>
                        </div>
                        <div class="box-shadow submit_btn center common_btn"  @click="placeOrder(3)">下一步</div>
                   </div>
                   <div class="relative" v-if="orderStep == 3">
                        <div style="height: 16px;margin-top: 15px;">
                          <img src="../../image/back_icon.png" class="back_icon absolute" @click="placeOrder(2)" />
                          <img src="../../image/close_icon.png" class="close_icon absolute" @click="placeOrder(0)" />
                        </div>
                        <div class="title_left text_left">订单信息</div>
                        <div class="place_order_form">
                          <div class="relative" style="height: 60px;line-height: 25px;padding-top: 10px;">
                            <div>
                              <span class="type_name"  v-text="orderObj.game_title"></span>
                              <p v-text="orderObj.grade_title"></p>
                              <p class="server_type absolute" v-text="orderObj.title"></p>
                            </div>
                            <div>
                              <span style="font-size: 15px;" v-text="'￥'+orderObj.price+'/'+orderObj.units"></span>
                              <p class="text-right" v-text="'×'+orderObj.times"></p>
                            </div>
                          </div>
                          <div  @click="enterCoupon">
                            <div class="type_name">选择优惠券</div>
                            <div class="discount">
                                <span v-if="orderObj.red_packet_id" class="discount_value" v-text="'满'+orderObj.limit_price+'减'+orderObj.reduce_price"></span>
                                 <span class="arrow_icon"></span>
                            </div>
                          </div>

                          <div style="border-bottom: 0;">
                            <div><span class="type_name">总计</span><span class="discount" v-if="orderObj.red_packet_id" v-text="'（已优惠'+orderObj.reduce_price+'元）'"></span></div>
                            <div>
                              <span class="form_price" style="font-size: 15px;">￥</span>
                              <span class="form_price" v-if="orderObj.reduce_price" style="font-size:20px;font-family: 'Gobold-Regular'" v-text="((orderObj.times*orderObj.price)-orderObj.reduce_price) || 0">0</span>
                              <span class="form_price" v-else style="font-size: 20px;font-family: 'Gobold-Regular'" v-text="(orderObj.times*orderObj.price) || 0">0</span>
                            </div>
                          </div>
                        </div>
                        <div class="hr"></div>
                        <div class="title_left text_left">请选择支付方式</div>
                        <div class="place_order_form pay_form">
                          <div @click="selectPayType(3)" class="relative">
                            <div>
                              <img src="../../image/wallet_icon.png" class="pay_icon" />
                              <span class="type_name">钱包支付</span><span class="blance" v-text="'（余额'+curreny.money+'元）'"></span>
                              <!-- <p class="wallet_pay_discount absolute">桃宝宝支付，最高减免188元</p> -->
                            </div>
                            <div class="form_value" style="line-height: 65px;"><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '3'}"></span></div>
                          </div>
                          <div @click="selectPayType(2)" v-if="platform == 'android'">
                            <div>
                              <img src="../../image/zhifubao_icon.png" class="pay_icon" />
                              <span class="type_name">支付宝支付</span>
                            </div>
                            <div class="form_value" style="line-height: 65px;"><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '2'}"></span></div>
                          </div>
                          <div @click="selectPayType(4)" v-if="platform == 'ios'">
                            <div>
                              <img src="../../image/zhifubao_icon.png" class="pay_icon" />
                              <span class="type_name">支付宝支付</span>
                            </div>
                            <div class="form_value" style="line-height: 65px;"><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '4'}"></span></div>
                          </div>
                          <div @click="selectPayType(1)" v-if="platform == 'android'">
                            <div>
                              <img src="../../image/wechat_icon.png" class="pay_icon" />
                              <span class="type_name">微信支付</span>
                            </div>
                            <div class="form_value" style="line-height: 65px;"><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '1'}"></span></div>
                          </div>
                        </div>
                        <div class="box-shadow submit_btn center common_btn" v-if="isRecharge" @click="rechargeFun">余额不足，前往充值</div>
                        <div class="box-shadow submit_btn center common_btn" v-else @click="submitOrder">确认付款</div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper-4.3.5.min.js"></script>
<script type="text/javascript" src="../../script/mobile.select.min.js"></script>
<script type="text/javascript">
apiready = function() {
    loading(true);
    var audio = api.require('audio');
    //smartupdatefinish();
    //监听优惠券的选择
    api.addEventListener({name: 'viewappear'}, function(ret, err){
        var key="coupon";       
        coupon = $api.getStorage(key); 
        //根据B页面更新的数据刷新A页面的局部
        if(coupon){
              coupon = JSON.parse(coupon);
              vm.$set(vm.orderObj,'limit_price',coupon.limit_price);
              vm.$set(vm.orderObj,'reduce_price',coupon.price);
              vm.$set(vm.orderObj,'red_packet_id',coupon.id);
              vm.calculationMoney();
        }
   });
    var swiper1,swiperBig;
    var vm = new Vue({
        el: '#home',
        data: {
            isCheck:'',
            userinfo:{},  //用户信息
            skillList:[],//技能列表
            skillNumber:0,
            winWidth:0,
            winHeight:0,
            userHomeCount:{}, //消费信息
            giftObj:{}, //礼物对象
            giftList:[],//礼物数组
            current:1, //当前礼物选中索引
            t:'',
            duration:'',
            curreny:{
              uid:''
            },//当前登录用户余额信息
            pay_type:'',//支付方式
            isRecharge:false,//是否要去充值
            orderStep:0, //下单步骤
            temporaryStep:0,//存储临时步骤 步骤2 下拉选择使用
            paragraphCurrent:1,//下拉选择的索引 1：大区 2：段位
            paragraphObj:{
                game_regional_locate:[]
            },//后台返回的段位和大区信息
            orderObj:{},//下单信息存储
            platform:'',
            bannerIndex:0,
            userid:'',
            radioStatus:false,
            viderm:''
        },
        mounted:function(){
            var uid = getQueryString('uid');
            if(uid){
                this.userid = uid;
            }else{
                //alert(api.pageParam.uid);
                this.userid = api.pageParam.uid;
            }
            this.winWidth = api.winWidth;
            this.winHeight = api.winHeight;
            this.getUserInfo();
            this.platform = $api.getStorage("platform");
        },
        methods:{
            playAudio:function(src){
                //播放音频
                var _this = this;
                this.viderm = src;      
                if(this.radioStatus){              
                    audio.pause();
                    _this.radioStatus = false;
                }else{
                    audio.play({
                        path:src
                    },function(ret,err){
                        if(!ret.complete){
                             //alert(JSON.stringify(ret));
                             if(ret.current){
                                _this.duration = (ret.duration - ret.current)+'s';
                                _this.radioStatus = true;        
                             }else{
                                _this.duration = ret.duration+'s';
                                _this.radioStatus = false;
                             }          
                        }else{
                            _this.radioStatus = false;
                        }
                    })
                }   
            },
            //获取个人信息
            getUserInfo:function(){
                var _this = this;
                ajaxRequest({
                    url:'api/user/'+this.userid+'/info',
                    callback:function(ret){
                        var userinfo = ret.data;
                        //取消loading
                        loading(false);
                        if(userinfo.user_image.length == 0){
                           var user_image = [userinfo.head]; 
                           userinfo.user_image = user_image;
                        }
                        _this.userinfo = userinfo;
                        if(userinfo.voice){
                            audio.getDuration({
                                path: userinfo.voice
                            }, function(ret) {
                               //alert(JSON.stringify(ret));
                                _this.duration = Math.ceil(ret.duration/1000)+'s'
                            });
                        }
                        //拿到数据之后再进行轮播初始化
                        _this.$nextTick(function(){
                            swiper1 = new Swiper('.swiper-container-banner', {
                                loop: true,
                                pagination: {
                                    el: '.swiper-pagination-banner',
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
    　　　　                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                                on:{
                                    click: function(){
                                        _this.bannerIndex = swiper1.realIndex;
                                    }
                                }
                            });
                            //大图轮播
                            swiperBig = new Swiper('.swiper-container-big', {
                                loop: true,
                                pagination: {
                                    el: '.swiper-pagination-big',
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
        　　　　                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                                on:{
                                    click: function(){
                                        _this.bannerIndex = swiperBig.realIndex;
                                        //swiper1.slideToLoop(swiperBig.realIndex, 0, false);
                                    }
                                }
                            });
                            //只有一条数组的时候不轮播
                            if(_this.userinfo.user_image.length==1){
                                swiper1.loop = false;
                                swiperBig.loop = false;
                            }
                        })
                        _this.t = $api.getStorage("token");
                        if(_this.t){
                            //查询登陆用户信息
                            _this.getCurreny();
                        }
                        _this.getUserHomeCount();
                        _this.getSkillList();
                        /*if($api.getStorage("platform")=="ios"){
                            sharePirtureUrl(_this.userinfo.user_image[0]);
                        }*/
                    }
                })
            },
            //大图关闭显示处理
            bigPicture:function(bool){
                if(bool){
                    swiperBig.slideTo(this.bannerIndex+1, 0, true);
                    $("#isBig").css({"opacity":1,'z-index':999,'height':'100%'});
                    $("#isBig").show();
                    $("#swiper").css({'z-index':999});
                    $("body,html").addClass("hidden");
                }else{
                    swiper1.slideTo(this.bannerIndex+1, 0, true);
                    $("#isBig").css({"opacity":0,'z-index':0,'height':'auto'});
                    $("#isBig").hide();
                    $("#swiper").css({'z-index':0});
                    $("body,html").removeClass("hidden");
                }
            },
            //关注处理
            followUser:function(){
                var _this = this;
                ajaxRequest({
                    method:'post',
                    url:'api/user/follow/'+this.userid+'/action',
                    callback:function(res){
                        mytoast(res.info);
                        _this.userinfo.is_follow = res.data.status;
                    }
                })
            },
            //获取当余额接口
            getCurreny:function(){
                var _this = this;
                ajaxRequest({
                    url:'api/user/getuserinfo',
                    callback:function(res){
                        _this.curreny = res.data;
                    }
                })
            },
            //获取技能列表
            getSkillList:function(){
                var _this = this;
                ajaxRequest({
                    url:'api/user/'+this.userid+'/adder',
                    callback:function(res){
                        var list = res.data; 
                        var skillNumber = 0;
                        var len = list.length;
                        for (var i = 0; i < len; i++) {
                            if(list[i].stop_order == 0){
                                skillNumber+=1;
                            }
                            var aray = list[i].star.split('.');
                            if (aray.length>1){
                                list[i].half_star = aray[1];
                            }
                        }
                        list.skillNumber = skillNumber;
                        _this.skillList = list;
                        //alert(JSON.stringify(list))
                        _this.getGiftList(1);
                    }
                })  
            },
            //获取用户收入情况接口和房间中数据
            getUserHomeCount:function(){
                var _this = this;
                ajaxRequest({
                    url:'api/user/userHomeCount?uid='+_this.userid,
                    callback:function(res){
                        //alert(JSON.stringify(res.data))
                        _this.userHomeCount = res.data;
                    }
                })
            },
            defaultRoomCover:function(){
                this.userHomeCount.cover = 'widget://image/chatroom_default.png';
            },
            enterCoupon:function(){
               openNewWin({
                  name: 'coupon',
                  params: {
                      adderId: this.orderObj.adder_id,
                      times:this.orderObj.times
                  }
              });
            },
            //下单余额不足去充值
            rechargeFun:function(){
                var _this = this;
                api.accessNative({
                    name: 'recharge'
                }, function(ret, err) {
                    //拿到回调之后查询余额
                    if (ret) {
                        _this.getCurreny();
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            },
            enterRoomFun:function(){
                //alert("跟过去");
                api.accessNative({
                    name: 'goingChatRoom',
                    extra: {
                        'chatroom_id': this.userHomeCount.chatroom_id
                    }
                }, function(ret, err) {

                });
            },
            //发消息
            sendMessageFun:function(){
                //alert("");
                api.accessNative({
                    name: 'contact',
                    extra: {
                        'uid': this.userid
                    }
                }, function(ret, err) {
                });
            },
            //支付
            payFun:function(res){
                res.uid = this.userid;
                api.accessNative({
                    name: 'pay',
                    extra: res
                }, function(ret, err) {
                    //拿到回调之后查询余额
                    if (ret) {
                        _this.getCurreny();
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            },
            //礼物查询
            searchGift:function(index){
                this.current = index;
                this.getGiftList();
            },
            //获取礼物墙数据
            getGiftList:function(number){
                var _this = this;
                ajaxRequest({
                    url:'api/user/userGiftWall?uid='+this.userid+'&type='+this.current,
                    callback:function(res){
                        _this.giftObj = res.data;
                        _this.giftList = _this.sliceArray(res.data.list,8);
                        var swiper = new Swiper('.swiper-container', {
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            observer: true,//修改swiper自己或子元素时，自动初始化swiper
　　　　                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                            onTouchStart: function(swiper) {
                                api.setFrameAttr({
                                    name: api.frameName,
                                    bounces: false
                                });
                            },
                            onTouchEnd: function(swiper) {
                                api.setFrameAttr({
                                    name: api.frameName,
                                    bounces: true
                                });
                            }
                        });
                        if(_this.giftList.length>0){
                            if(number!=0){
                                swiper.slideTo(0,1000,false);
                            }
                        }
                    }
                })
            },
            //下单步骤显示处理
            placeOrder:function(current){
                if(current == 2){
                    if(this.orderObj.adder_id){
                        $(".mobileSelect").remove();//解决步骤二来回进入和返回下拉重复问题
                        this.orderStep = current; //显示第一步技能选择
                        this.getParagraphList();
                    }else{
                        mytoast('请选择宝宝的技能！');
                    }
                    //没有次数时候次数默认为1 
                    if(!this.orderObj.times){ //增加判断避免选择之后返回再下一步会回到1
                        this.$set(this.orderObj,'times',1);
                    }
                  }else if(current == 3){
                    var paragraphObjLen = this.paragraphObj.game_regional_locate.length;
                    if(paragraphObjLen>0){
                        if(!this.orderObj.regional_id){
                            mytoast('请选择大区！');
                            return;
                        }
                        if(paragraphObjLen>1){
                            if(!this.orderObj.grade_id){
                                mytoast('请选择时段！');
                                return;
                            }
                        }
                    }
                    if(!this.orderObj.times){
                        mytoast('请选择时长！');
                        return;
                    }
                    this.orderStep = current; //显示第一步技能选择
                    this.calculationMoney();//进入页面计算一下是否需要充值解决返回第二步重新选择时长后返回第三步充值状态不对
                    this.getCurreny();
                }else{
                    this.orderStep = current; //显示第一步技能选择
                }
            },
            selectSkill:function(obj){
                this.orderObj = obj;
            },
            //下单支付类型选中和保存处理
            selectPayType:function(type){
                this.pay_type = type;
                this.calculationMoney();
            },
            calculationMoney:function(){
                var outMoney = this.orderObj.times*this.orderObj.price;
                if(this.orderObj.red_packet_id){
                    outMoney = (this.orderObj.times*this.orderObj.price)-this.orderObj.reduce_price;
                }
                if(this.pay_type == 3 && (parseInt(this.curreny.money)<parseInt(outMoney))){
                    this.isRecharge = true;
                }else{
                    this.isRecharge = false;
                }
            },
              //下拉选择处理
            showSelectBox:function(type){
                this.paragraphCurrent = type;
                this.isShowgradBox = true;
                this.temporaryStep = this.orderStep;
                //打开下拉选择时关闭步骤框
                this.orderStep = 0;
            },
            //完成下拉选择
            finishSelect:function(){
                //选择完成后回到订单步骤
                this.orderStep = this.temporaryStep; 
            },
            getParagraphList:function(){
               var _this = this;
               ajaxRequest({
                    url:'/api/adder/servicecategory?gameId='+this.orderObj.game_id+'&categoryId='+this.orderObj.adder_service_id,
                    callback:function(response){
                        //时长
                        var times=[1,2,3,4,5,6,7,8,9,10];
                        var MobileSelect3 = _this.MobileSelect(3,times);
                        if(response.data){
                            _this.paragraphObj = response.data;
                            //不为空时格式化为数组
                            if(response.data.game_regional_locate!=""){
                                _this.paragraphObj.game_regional_locate = response.data.game_regional_locate.split(",");
                                var MobileSelect1 = _this.MobileSelect(1,response.data.regional);
                                if(_this.paragraphObj.game_regional_locate.length>1){
                                    var MobileSelect2 = _this.MobileSelect(2,response.data.grade);
                                }
                            }
                        }
                    }
                })
            },
            //下拉数据初始化处理
            MobileSelect:function(type,array){
                var _this = this;
                new MobileSelect({
                    trigger: '#trigger'+type,
                    title: type==3?'请选择时长':this.paragraphObj.game_regional_locate[type-1],
                    wheels: [{data:array}],
                    position:[0], //初始化定位
                    transitionEnd:function(indexArr, data){
                    },
                    callback:function (indexArr, data){
                        if(type == 1){
                            _this.$set(_this.orderObj,'regional_id',data[0].id);
                            _this.$set(_this.orderObj,'regional_title',data[0].title);
                        }else if(type == 2){
                            _this.$set(_this.orderObj,'grade_id',data[0].id);
                            _this.$set(_this.orderObj,'grade_title',data[0].title);
                        }else{
                            _this.$set(_this.orderObj,'times',data[0]);
                        }
                        _this.finishSelect();
                    }  
                });
            },
            //提交订单接口
            submitOrder:function(){
                var _this = this;
                var  time = encodeURI(new Date().Format("yyyy-MM-dd hh:mm"));
                if(!this.pay_type){
                    mytoast('请选择支付方式！');
                    return;
                }
                var red_packet_id = this.orderObj.red_packet_id;
                if(!red_packet_id){
                    red_packet_id = 0;
                }
                ajaxRequest({
                    method:'post',
                    url:'api/adder/'+this.orderObj.adder_id+'/store/order?begin_time='+time+'&regional_id='+this.orderObj.regional_id+'&grade_id='+this.orderObj.grade_id+'&num='+this.orderObj.times+'&red_packet_id='+red_packet_id+'&pay_type='+this.pay_type+'&message=',
                    callback:function(res){
                        _this.payFun(res.data);
                    }
                })
            },
            //分割指定长度的数组
            sliceArray:function(array, size) {
                var result = [];
                for (var x = 0; x < Math.ceil(array.length / size); x++) {
                    var start = x * size;
                    var end = start + size;
                    result.push(array.slice(start, end));
                }
                return result;
            }
        }
    });
};
</script>

</html>
